import Vuex from 'vuex'
import Vue from 'vue'

// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store({
  // --------------2. 开启严格模式
  strict: true,

  // --------------1. state 状态, 即数据, 类似于vue组件中的data
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 66,
    userName: '',
    userCity: '',
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },

  // --------------5. getters 状态的计算属性
  getters: {
    filterList(state){
      return state.list.filter(item => item % 2 === 0)
    }
  },

  // --------------3. mutations 状态的修改, 类似于vue组件中的methods
  // 只能去写同步代码, 不能写异步代码
  mutations: {
    // 1. +
    addCount(state, count) {
      state.count += count
    },

    // 2. count
    subCount(state, count) {
      state.count -= count
    },

    changeCount(state, count){
      state.count = count
    },

    changeUserMsg(state, user){
      state.userName = user.userName
      state.userCity = user.userCity
    }
  },

  // --------------4. actions -----------------
  actions: {
    asyncAddCount(context, count){
      setTimeout(()=>{
        context.commit('addCount', count)
      }, 2000)
    }
  }
})

export default store